<template>
  <el-button
    type="primary"
    style="margin-bottom: 10px"
    @click="handleDrawer('add')"
    >新增商品规格</el-button
  >
  <el-table :data="state.tableData" border style="width: 100%">
    <el-table-column prop="index" label="序号" width="60px">
      <template #default="scope">
        {{ (state.pageNum - 1) * state.pageSize + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="商品类别名称" prop="categoryName"></el-table-column>
    <el-table-column label="商品类别代码" prop="categoryCode"></el-table-column>
    <el-table-column label="操作" width="320" fixed="right">
      <template #default="scope">
        <el-button @click="handleDrawer('view', scope.row)">详情</el-button>
        <el-button type="primary" @click="handleDrawer('edit', scope.row)">
          编辑
        </el-button>
        <el-button type="danger" @click="handleDelete(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pagination
    :total="state.total"
    :limit="state.pageSize"
    :page-change="PageChange"
  />
  <el-drawer v-model="drawer" size="50%" :title="drawerTitle">
    <Form ref="formRef" :closeDrawer="closeDrawer" :drawerType="drawerType"></Form>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, markRaw } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Pagination from "@/components/pagination/index.vue";
import Form from "./form.vue";
import { getProductCategoryList, deleteProductCategory } from "@/api/shop/index";
import { Delete } from '@element-plus/icons-vue'

const formRef = ref<any>(null);

const drawer = ref(false);
const drawerType = ref<"add" | "edit" | "view">("add");

const drawerTitle = computed(() => {
  switch (drawerType.value) {
    case "add":
      return "新增商品规格";
    case "edit":
      return "编辑商品规格";
    default:
      return "";
  }
});

const state = reactive<any>({
  editId: -1,
  tableData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  searchParams: {},
});

const handleDrawer = (type: "add" | "edit" | "view", row?: any) => {
  drawer.value = true;
  drawerType.value = type;
  if (type !== "add") {
    state.editId = row.spuCategoryId;
    setTimeout(() => {
      formRef.value.initForm(row);
    }, 100);
  }
};

const closeDrawer = () => {
  drawer.value = false
  fetchList()
}

const fetchList = () => {
  getProductCategoryList({
    pageNum: state.pageNum,
    pageSize: state.pageSize,
  }).then((res) => {
    state.total = res.data.total;
    state.tableData = res.data.rows;
  });
};
fetchList();

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确认删除商品分类“${row.categoryName}”吗？`,
    '删除',
    {
      type: 'warning',
      icon: markRaw(Delete),
    }
  ).then(() => {
    deleteProductCategory({
      spuCategoryId: row.spuCategoryId
    }).then(() => {
      ElMessage.success("删除成功");
      fetchList()
    }).catch(err => {
      ElMessage.warning(err.message);
    })
  })
};

// 分页
const PageChange = (page: number) => {
  state.pageNum = page;
  fetchList();
};
</script>
<style lang="scss" scoped></style>
